<template>
  <div class="n_top">
    <div class="logo">后台管理</div>
    <div class="caidan">
      <el-button type="text">{{name}}</el-button>
      <el-button type="danger" size="mini" @click="tuichu()">退出</el-button>
    </div>
  </div>
  <div class="n_left">
    <h5 class="pad10">菜单</h5>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :router="true"
      >
        <el-sub-menu :index="k" v-for="v,k in menu">
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{v.name}}</span>
          </template>
          <el-menu-item v-for="vv,kk in v.list" :index="vv.key">{{vv.name}}</el-menu-item>
        </el-sub-menu>
       
        
        
      </el-menu>
  </div>
  
  <div class="n_main"><router-view name="table"/></div>
  
</template>

<script>


import { defineComponent,ref,onMounted } from 'vue'
import {request} from '../api/request.js'
import { ElMessage } from 'element-plus'
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
} from '@element-plus/icons'

export default defineComponent({
  components: {
    Location,
    Document,
    Setting,
    IconMenu,
  },
  setup() {
    var menu=ref([]);
    var token=window.sessionStorage.getItem('token');
    var admin=[];
    
    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath)
    }
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath)
    }
    const tuichu=()=>{
        window.sessionStorage.removeItem('name')
        window.sessionStorage.removeItem('token')
        location.reload()
    }
    const jiazai=()=>{
      request('/g/index/get_app_info',{token:token},res=>{
          console.log(res)
          if(res.ing==1){
              menu.value=res.data.nav;
          }else{
              ElMessage.error(res.msg)
          }
      },err=>{
          ElMessage.error( err.msg )
      })
    }
    const name=window.sessionStorage.getItem('name')

    onMounted(()=>{
      jiazai()
    })
    return {
      admin,
      menu,
      jiazai,
      handleOpen,
      handleClose,
      tuichu,
      name
    }
  },
})

</script>

<style scoped>
.n_top{position: fixed;left: 0; top: 0; right: 0;height: 50px;z-index: 91;display: flex;justify-content: space-between;background: #f2f2f2;}
.n_left{position: fixed;left: 0; top: 50px; height: 100%;z-index: 90;width: 200px;border-right: solid 1px #e6e6e6;}
.n_main{position: fixed;left: 200px; top: 50px; right: 0;min-height: calc(100% - 100px);z-index: 99;padding: 20px 20px;}

.n_top > .logo{background: url(../assets/logo.png) no-repeat; background-position: 20px center;font-weight: bolder; background-size: 40px;padding-left: 50px;font-size: 18px;line-height: 50px;color: #888;width: 200px;}
.n_top > .caidan{width: salc(100%-200px);padding-right: 15px;line-height: 48px;}

.el-menu-vertical-demo{margin-right:-1px;}
</style>>
